<template>
	<view class="wrap-box">
		<view class="user-box">
			<sh-userinfo :detail="userInfoBg"></sh-userinfo>
			<view class="kefu">
				<view>专属客服：王伟</view>
				<view>18663984596</view>
				</view>
			<view class="center-data">
				<view class="block-items">
					<view class="block-item">
						<view class="iconfont icon-daohanggouwuche"></view>
						<view class="block-item-num">1</view>
						<view class="block-item-title">待处理订单</view>
					</view>
					<view class="block-item">
						<view class="iconfont icon-zonghekaidan"></view>
						<view class="block-item-num">2</view>
						<view class="block-item-title">处理中</view>
					</view>
					<view class="block-item">
						<view class="iconfont icon-wodedaishouhuo"></view>
						<view class="block-item-num">1</view>
						<view class="block-item-title">待收货</view>
					</view>
					<view class="block-item">
						<view class="iconfont icon-3dtouchwenzhangxiangqingliebiao"></view>
						<view class="block-item-num">5</view>
						<view class="block-item-title">已完成</view>
					</view>
				</view>
			</view>

			<view class="center-data">
				<view class="order-list" @tap.stop="jump('/pages/order/listc', {  })">
					<view class="order-head x-bc">
						<text class="no">订单跟踪</text>
						<text class="state">></text>
					</view>
				</view>
				<view class="order-list">
					<view class="order-head x-bc" @tap.stop="jump('/pages/app/dealer/subcustomers',{})">
						<text class="no">我的转介绍</text>
						<text class="state">></text>
					</view>
				</view>
				<view class="order-list">
					<view class="order-head x-bc" @tap.stop="jump('/pages/app/dealer/benefit',{})">
						<text class="no">我的收益</text>
						<text class="state">></text>
					</view>
				</view>
				<!-- <view class="order-list">
					<view class="order-head x-bc">
						<text class="no">专属客服</text>
						<text class="state">></text>
					</view>
				</view> -->
				<view class="order-list" @tap.stop="jump('/pages/public/faq', {  })">
					<view class="order-head x-bc">
						<text class="no">常见问题</text>
						<text class="state">></text>
					</view>
				</view>
				<view class="order-list" @tap.stop="jump('/pages/user/set', { })">
					<view class="order-head x-bc">
						<text class="no">系统设置</text>
						<text class="state">></text>
					</view>
				</view>
			</view>


			<!--导航栏-->
			<view class="footer">
				<view class="footer-item"  @tap.stop="jump('/pages/app/dealer/index',{})">
					<image class="footer-item-image" src="https://shopro-1253949872.file.myqcloud.com/uploads/20200704/c4591c74c27a49bda021257d3c889225.png"></image>
					<view class="footer-item-text">明辉出品</view>
				</view>
				<view class="footer-item"  @tap.stop="jump('/pages/app/dealer/design', { })">
					<image class="footer-item-image" src="https://shopro-1253949872.file.myqcloud.com/uploads/20200704/d6e987bb27013691478ddce7ce700288.png"></image>
					<view class="footer-item-text">就要定制</view>
				</view>
				<view class="footer-item">
					<image class="footer-item-image" src="https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0ab4659f44404d6d4723c265ccd21f94.png"></image>
					<view class="footer-item-text">与君分享</view>
				</view>
				<view class="footer-item"  @tap.stop="jump('/pages/app/dealer/user',{})">
					<image class="footer-item-image" src="https://shopro-1253949872.file.myqcloud.com/uploads/20200704/8eca666cc43686d292113244b31e0664.png"></image>
					<view class="footer-item-text">服务支持</view>
				</view>
			</view>


			<!-- 关注弹窗 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 连续弹窗提醒 -->
			<!-- <shopro-notice-modal></shopro-notice-modal> -->
			<!-- 登录提示 -->
			<shopro-login-modal></shopro-login-modal>
		</view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
	import shUserinfo from '@/pages/index/components/sh-userinfo-c.vue';

	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			shUserinfo
		},
		data() {
			return {
				userInfoBg: {
					color: 'background-color: rgb(238, 238, 238);',
					image: 'https://shopro-1253949872.file.myqcloud.com/uploads/20200704/3fd138c2e95f80ecc11eebe312ffce94.png'
				},
				orderList: []
			};
		},
		computed: {

		},
		onPullDownRefresh() {
			// this.init();
		},
		onLoad() {
			this.getOrderList();
		},
		onShow() {
			// this.init();
		},
		methods: {
			...mapActions(['getUserInfo']),
			getOrderList() {
				let that = this;
				that.isLoading = true;
				that.loadStatus = 'loading';

				let userInfo = JSON.parse(uni.getStorageSync("userInfo"));

				uni.request({
					url: this.$config.API_URL + "Distribute/ListOrder",
					method: "POST",
					data: {
						"distributerCode": uni.getStorageSync("dealerCode")
					},
					success: (result) => {
						that.isLoading = false;
						that.loadStatus = '';
						that.orderList = [...that.orderList, ...result.data];
					},
				})



			},
			jumpTo(url) {
				console.log(url)
				// var newsid = e.currentTarget.dataset.newsid;
				uni.redirectTo({
					url: '/pages/info/index?name=1',
				});
			},
			// 初始化
			init() {
				return Promise.all([this.getMyOrderList()])
					.then(() => {
						uni.stopPullDownRefresh();
					})
					.catch(() => {
						uni.stopPullDownRefresh();
					});
			},

			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			getbgcolor(e) {
				this.bgcolor = e;
			},
			getMyOrderList() {

			}
		}
	};
</script>

<style lang="scss">
	// @import url('//at.alicdn.com/t/font_956911_py2eooakww9.css');

	.user-box {
		overflow-x: hidden;
		position: relative;
		overflow-y: auto;
		// height: 100%;
	}

	// 微信登录蒙层
	.login-box {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background: none;
	}

	// 顶部
	.transtion-head {
		height: 120rpx;
		background: #fff;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		transition: all 0.2s linear;
		transform: translateY(-120rpx);
		border-bottom: 1rpx solid #f2f2f2;
	}

	.transtion-head--active {
		height: 120rpx;
		background: #fff;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		transition: all 0.2s linear;
		transform: translateY(0rpx);
		border-bottom: 1rpx solid #f2f2f2;
	}

	.foot_box {
		padding-top: 200rpx;
		padding-bottom: calc(var(--window-bottom) + 30px);
		margin-bottom: 50rpx;
	}

	.copyright {
		color: #999;

		.code1 {
			font-size: 24rpx;
		}

		.code2 {
			font-size: 20rpx;
			margin-top: 10rpx;
		}
	}


	.center-data {
		margin-top: 15rpx;
		background-color: white;

		.block-title {
			height: 50rpx;
			line-height: 50rpx;
			border-left: solid 2px red;
			margin-left: 10px;
			padding-left: 10px;
			font-size: 28rpx;
			font-weight: bold;
		}

		.block-items {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 0rpx;

			.block-item {
				width: 25%;
				height: 150rpx;
				display: inline-block;
				text-align: center;

				border: solid 1px rgb(246, 246, 246);


				.iconfont {
					font-size: 40rpx;
					margin-top: 5px;
				}

				&-title {
					font-size: 24rpx;
					// margin-top:30rpx;
				}

				&-num {
					font-weight: bold;
					margin-top: 10rpx;
					font-size: 32rpx;
					color: rgb(233, 80, 26);
				}
			}
		}
	}

	.order-list {
		background: #fff;

		// margin: 20rpx 0;
		.order-bottom {
			padding-bottom: 20rpx;

			.btn-box {
				justify-content: flex-end;
			}

			.all-msg {
				font-size: 24rpx;
				color: #999;
				justify-content: flex-end;
				margin-bottom: 10rpx;
				padding: 0 30rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;

					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}

			.obtn1 {
				width: 160rpx;
				height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn2 {
				width: 160rpx;
				height: 60rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
				padding: 0;
			}
		}

		.order-head {
			padding: 0 25rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #dfdfdf;

			.no {
				font-size: 26rpx;
				color: #999;
			}

			.state {
				font-size: 26rpx;
				color: #a8700d;
			}
		}

		.order-content {
			padding-bottom: 20rpx;
		}

		.goods-order {
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;
		}

		.goods-bottom {
			background: #fff;
			padding-bottom: 30rpx;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0px;
		right: 0px;
		z-index: 1000;
		display: flex;
		height: calc(55px + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		width: 100%;
		z-index: 70;
		background-color: #FFFFFF;
	}

	.footer-item {
		width: 25%;
		text-align: center;
		padding-top: 14rpx;
	}

	.footer-item-image {
		width: 25px;
		height: 25px;
	}

	.footer-item-text {
		color: rgb(153, 153, 153);
		font-size: 20rpx;
	}
	.kefu
	{
		color: white;
		position: absolute;
		top: 80rpx;
		right: 50rpx;
		line-height: 40rpx;
		font-size: 32rpx;
	}
</style>
